<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.6.0.js"></script>
		<style>
			li{
				list-style-type: none;
			}
			.sec{
				display: none;
				position: absolute;
				left: -40px;
				background-color: yellow;
			}
			.sec>li{
				display: block;
				width: 100px;
			}
			.content>li{
				display: inline-block;
				position: relative;
				width: 100px;
			}
			.content{
				background-color: #F00;
			}
		</style>
	</head>
	<body>
		<ul class="content">
			<li>四个自信
				<ul class="sec">
					<li>道路自信</li>
					<li>理论自信</li>
					<li>制度自信</li>
					<li>文化自信</li>
				</ul>
			</li>
			<li>四个意识
				<ul class="sec">
					<li>政治意识</li>
					<li>大局意识</li>
					<li>核心意识</li>
					<li>看齐意识</li>
				</ul>
			</li>
			<li>四个全面
				<ul class="sec">
					<li>全面建成小康社会</li>
					<li>全面深化改革</li>
					<li>全面依法治国</li>
					<li>全面从严治党</li>
				</ul>
			</li>
			
		</ul>
		<script>
			$(".content>li").mouseover(function(){
				$(this).find("ul").stop().slideDown(600);
			}).mouseout(function(){
				$(this).find("ul").stop().slideUp(600);
			});
		</script>
	</body>
</html>
